<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
        <script src="js/vue.global.js"></script>
        <script  src="js/echarts.min.js"></script>
        <script src="js/data.js"></script>
    </head>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #06164A;
        }
        .left{
            width: 40%;
        }
        .left>div{
            height: 400px;
            border: 1px solid #f5f5f5; 
        }
    </style>
    <body>
        <div id="app">
            <section class="left">
                <div id="chart1"></div>
                <div id="chart2"></div>
                <div id="chart3"></div>
                <div id="chart4"></div>
            </section>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        
                    }
                },
                mounted(){
                    this.chart1()
                    this.chart2()
                    this.chart3()
                    this.chart4()
                },
                methods:{
                    chart1(){
var xdata=[],ydata=[];   //组装x y的数据
data.chart1.forEach(item=>{
    xdata.push(item.industry)
    ydata.push(item.value)
})             
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom,'dark');
var option;  //配置选项

option = {
  backgroundColor: '#06164A',  //背景色
  title:{  //标题
    text:"各行业程序员数量",
    left:"center",
    top:"10px"
  },
  tooltip: {  //提示框
    show:true,
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: xdata
  },
  yAxis: {
    type: 'value',
    axisLine:{  //坐标轴线
      show:true
    }
  },
  series: [
    {
      data: ydata,
      type: 'bar',
      barWidth:"50%",
      itemStyle:{
        borderRadius:8  //圆角
      }
    }
  ]
};

option && myChart.setOption(option);
window.addEventListener('resize',()=>{
    myChart.resize()
})
                    },
                    chart2(){ 
var xdata=[],ydata1=[],ydata2=[]   //组装x y的数据
data.chart2.forEach(item=>{
    xdata.push(item.month)
    ydata1.push(item.value1)
    ydata2.push(item.value2)
})             
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom,'dark');
var option;  //配置选项

option = {
  backgroundColor: '#06164A',  //背景色
  title:{  //标题
    text:"学习变化",
    left:"center",
    top:"10px"
  },
  legend:{  //图例
    show:true,
    right:"10%",
    top:10
  },
  tooltip: {  //提示框
    show:true,
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: xdata
  },
  yAxis: {
    type: 'value',
    axisLine:{  //坐标轴线
      show:true
    }
  },
  series: [
    {
      name:"新增项目",
      data: ydata1,
      type: 'line',
      smooth:true,
      lineStyle:{
        color:"#ED3F35",
        width:3,
      },
      itemStyle:{
        color:"#ED3F35"
      },
      symbol:"emptyCircle",
      symbolSize:8
    },
    {
        name:"新增技能",
        data: ydata2,
        type: 'line',
        smooth:true,
        lineStyle:{
          color:"#00F0F0",
          width:3,
        },
        itemStyle:{
          color:"#00F0F0"
        },
        symbol:"emptyCircle",
        symbolSize:8
    }
  ]
};

option && myChart.setOption(option);
window.addEventListener('resize',()=>{
    myChart.resize()
})
                    },
                    chart3(){
data.chart3.forEach(item=>{
    item.name=item.ageGroup
})             
var chartDom = document.getElementById('chart3');
var myChart = echarts.init(chartDom,'dark');
var option;  //配置选项

option = {
  backgroundColor: '#06164A',  //背景色
  title:{  //标题
    text:"学习变化",
    left:"center",
    top:"10px"
  },
  legend:{  //图例
    show:true,
    right:"center",
    bottom:"10px",
    width:"100%"
  },
  tooltip: {  //提示框
    show:true,
    trigger: 'axis',
    formatter:"{b}:{c} {d}%"
  },
  series: [  //系列
    {
      name:"年龄分布",
      data: data.chart3,
      type: 'pie',
      radius:['40%','60%'],
      label:{
        show:false
      }
    }
  ]
};

option && myChart.setOption(option);
window.addEventListener('resize',()=>{
    myChart.resize()
})
                    },
                    chart4() {
    // 准备数据
    var xdata = [], inData = [], outData = [];
    data.chart4.forEach(item => {
        xdata.push(item.date);
        inData.push(item.inflow);
        outData.push(item.outflow);
    });

    // 获取图表容器
    var chartDom = document.getElementById('chart4');
    var myChart = echarts.init(chartDom, 'dark');

    // 配置项
    var option = {
        backgroundColor: '#06164A', // 背景色
        title: { // 标题
            text: '折线图-公司人员流动',
            left: 'center',
            top: '10px'
        },
        legend: { // 图例
            show: true,
            right: 'center',
            top: 30,
            data: ['流入', '流出']
        },
        tooltip: { // 提示框
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: xdata
        },
        yAxis: {
            type: 'value',
            axisLine: { // 坐标轴线
                show: true
            }
        },
        series: [
            {
                name: '流入',
                data: inData,
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#1E90FF',
                    width: 3
                },
                itemStyle: {
                    color: '#1E90FF'
                },
                symbol: 'emptyCircle',
                symbolSize: 8
            },
            {
                name: '流出',
                data: outData,
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#32CD32',
                    width: 3
                },
                itemStyle: {
                    color: '#32CD32'
                },
                symbol: 'emptyCircle',
                symbolSize: 8
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);

    // 监听窗口大小变化，自适应调整图表大小
    window.addEventListener('resize', () => {
        myChart.resize();
    });
}
                }
            }).mount('#app')
        </script>
    </body>
</html>